<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生的增删改查2</title>
</head>
<body>
  
  <div>
    <button id="xzbj">选择班级</button>
    <select  id="pxff">
      <option value="1">按照编号升序</option>
      <option value="2" selected>按照编号降序</option>
      <option value="3">按照班级名称升序</option>
      <option value="4">按照班级名称降序</option>
      <option value="5">分班级按照姓名排序</option>
    </select>
    <input type="text" id="xmcx" placeholder="学生姓名">
    <input type="text" id="dhcx" placeholder="学生电话">
    <input type="text" id="qqcx" placeholder="学生qq">
    <input type="text" id="wxcx" placeholder="学生微信">
    <button id="cx">查询</button>
    <button id="cz">重置</button>
    <button id="zj">增加</button>
  </div>

  <!-- 选择班级弹窗 -->
  <dialog id="xztc">
    <form method="dialog"></form>

    <div>
      <input type="text" id="bjcx" placeholder="班级名称">
      <button id="Acx">查询</button>
      <button id="Aqx">取消</button>
    </div>
    <table>
      <thead>
        <tr>
          <th>班级名称</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="bjxx">
        <!-- <tr>
          <td>

          </td>
        </tr> -->
      </tbody>
    </table>
    <nav>
      <a href="javascript:void(0)">第一页</a>
      <a href="javascript:void(0)">上一页</a>
      <span></span>
      <a href="javascript:void(0)">下一页</a>
      <a href="javascript:void(0)">最后一页</a>
    </nav>

  </dialog>

<!-- 学生信息 -->
  <table style="width: 100%;">
    <thead>
      <tr>
        <th>学生姓名</th>
        <th>qq</th>
        <th>微信</th>
        <th>手机号码</th>
        <th>家庭地址</th>
        <th>信息最后修改时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody id="xsxx">
    <!-- <tr> -->
      <!-- <td></td> -->
    <!-- </tr> -->
    </tbody>
  </table>

<!-- 学生增加 -->
<dialog id="zjtc">
  <form method="dialog"></form>
  <button id="xzbj2">选择班级</button>
  <hr>
  <input type="text" id="tjxm" placeholder="学生姓名">
  <hr>
  <input type="text" id="tjqq" placeholder="qq">
  <hr>
  <input type="text" id="tjwx" placeholder="微信">
  <hr>
  <input type="text" id="tjhm" placeholder="手机号码">
  <hr>
  <input type="text" id="tjdz" placeholder="家庭地址">
  <hr>
  <button id="tj">添加</button>
  <button id="qx">取消</button>
</dialog>

<!-- 学生修改 -->
<dialog id="xgtc">
  <form method="dialog"></form>
  <button id="xzbj3">选择班级</button>
  <hr>
  <input type="text" id="xgxm" placeholder="学生姓名">
  <hr>
  <input type="text" id="xgqq" placeholder="qq">
  <hr>
  <input type="text" id="xgwx" placeholder="微信">
  <hr>
  <input type="text" id="xghm" placeholder="手机号码">
  <hr>
  <input type="text" id="xgdz" placeholder="家庭地址">
  <hr>
  <button id="xg">修改</button>
  <button id="qx2">取消</button>
</dialog>

<!-- 分页 -->

<div>
<button id="a">第一页</button>
<button id="b">上一页</button>
<button id="c"></button>
<button id="d">下一页</button>
<button id="e">最后一页</button>
</div>

  <script src="./js/xueshen2.js" type="module"></script>
</body>
</html>